<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<c:set var="ctx" value="<%=basePath%>" />
<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    <title>开始透析</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-touch-fullscreen"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="云净,透析单,网页透析" />
	<meta http-equiv="description" content="云净透析单" />
	<link href="${ctx}image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
	<link rel="stylesheet" type="text/css" href="${ctx}bootstrap/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/weui/weui.css" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/yunjing/mtxform.css?v=201708311653" />
	<link rel="stylesheet" type="text/css" href="${ctx}css/xgtl_wdbj.css" />
	<style>
	   .page_info_lable{width: 100px;}
	  .head_confirm{font-size: 16px;color: #3da2ee;float: right;}
	  .head_confirm_time{font-size: 16px;font-weight: bold;}
	  .local_modal_confirm_button {
	    color: #0ACCDD;
	    background-color: #FFFFFF;
	  }
	  .page_scroll_hour{
	    display:inline-block;
	    height: 180px;
	    overflow: scroll;
	    margin-right: 40px;
	    width: 60px;
	  }
	  .page_scroll_hour>li{
	    color: #777777;
	    padding: 8px;
	    list-style-type: none;
	  }
	  .page_scroll_minute{
	    display:inline-block;
	    height: 180px;
	    overflow: scroll;
        width: 60px;
	  }
	 .page_scroll_minute>li{
	    color: #777777;
	    padding: 8px;
	    list-style-type: none;
	 }
	 .page_select_time{
	    width: 123px;
	    text-align: right;
	    color: #777777;
        font-size: 16px;
        line-height: 30px;
        padding-right: 16px;
	 }
	 .sp_top{
	  position: absolute;top: 70px;border-bottom: 1px solid #ddd;width: 100%
	 }
	  .sp_bottom{
	  position: absolute;top: 110px;border-bottom: 1px solid #ddd;width: 100%
	 }
	 
	 ul::-webkit-scrollbar{
	  display: none;
	 }
	 .scroll_li_active{color: black !important;font-weight: bold;}
	 .word_confirm_btn{border: 0px;background: none;}
	 .local_modal_confirm_div {
	    text-align: center;
	    padding-bottom: 20px;
	    padding-top: 20px;
     }
     
	</style>
  </head>
  <body>
   <div class="page_header ">
        <div class="page_header_module">
           <a href="javascript:void(0);" onclick="window.location.href='${ctx}txform/mtxform.shtml'" class="back_a" style="font-size: 16px;" >
           <img src="image/yunjing/mtxform/goback.png" style="width: 20px;" alt="返回" class="back_pic" />返回
           </a>   
        </div>     
        <div class="page_header_module">
           <span class="head_confirm_time">开始透析时间</span>
        </div>
        <div class="page_header_module"><button type="button" class="head_confirm word_confirm_btn" >确认</button></div>
   </div>
  
  <form class="tx_from_begin" id="tx_form">
    <input name="tx_number" type="hidden"  value="${param.tx_number}" />
    <input name="tx_time" type="hidden"  value="${param.tx_time}" />
    <input name="tx_zlxj_id" type="hidden"  value="${txzlxj.tx_zlxj_id}" />
    <input name="tx_zl_doctor" type="hidden"  value="${txzlxj.tx_zl_doctor}" />
    <input name="tx_zl_doctor_id" type="hidden"  value="${txzlxj.tx_zl_doctor_id}" />
   <table class="table table_info">
	   <tr>
	    <td align="right">
	      <div class="page_select_time page_info_lable">时间</div>
	    </td>
	    <td colspan="2" align="left">
	       <div class="page_info">
	          <input type="text" class="info_input" name="tx_start_time_hi" value="" placeholder="请滚动选择/输入"  />
	          <input type="hidden" class="info_input" name="tx_start_time" value=""  />
	       </div>
	    </td>
	   </tr>
	   
	   <tr>
	    <td colspan="3">
	      <div style="margin: 0 auto;text-align: center;position: relative;">
	          <div class="sp_top" ></div><div class="sp_bottom" ></div>
		      <ul class="page_scroll_hour" >
		       <li>01时</li> <li>02时</li> <li>03时</li> <li>04时</li> <li>05时</li>  <li>06时</li>
		       <li>07时</li> <li>08时</li> <li>09时</li> <li>10时</li> <li>11时</li>  <li>12时</li>
		       <li>13时</li> <li>14时</li> <li>15时</li> <li>16时</li> <li>17时</li> <li>18时</li>
		       <li>19时</li> <li>20时</li> <li>21时</li> <li>22时</li> <li>23时</li> <li>00时</li>
		      </ul>
		      <ul class="page_scroll_minute">
		         <li>01分</li><li>02分</li><li>03分</li><li>04分</li><li>05分</li><li>06分</li><li>07分</li><li>08分</li><li>09分</li><li>10分</li>
		         <li>11分</li><li>12分</li><li>13分</li><li>14分</li><li>15分</li><li>16分</li><li>17分</li><li>18分</li><li>19分</li><li>20分</li>
		         <li>21分</li><li>22分</li><li>23分</li><li>24分</li><li>25分</li><li>26分</li><li>27分</li><li>28分</li><li>29分</li><li>30分</li>
		         <li>31分</li><li>32分</li><li>33分</li><li>34分</li><li>35分</li><li>36分</li><li>37分</li><li>38分</li><li>39分</li><li>40分</li>
		         <li>41分</li><li>42分</li><li>43分</li><li>44分</li><li>45分</li><li>46分</li><li>47分</li><li>48分</li><li>49分</li><li>50分</li>
		         <li>51分</li><li>52分</li><li>53分</li><li>54分</li><li>55分</li><li>56分</li><li>57分</li><li>58分</li><li>59分</li><li>00分</li>
		      </ul>
	      </div>
	    </td>
	   </tr>	
		
	   <tr>
	     <td align="right"><div class="page_info_lable">治疗护士</div></td>
	     <td class="select_page">
	       <div class="page_info">
	        <input type="hidden" class="info_input_id" name="tx_zl_nurse_id" value="${txzlxj.tx_zl_nurse_id}" />
	        <input type="text" class="info_input"  name="tx_zl_nurse" value="${txzlxj.tx_zl_nurse}" readonly="readonly" placeholder="请选择"  />
	       </div>
	     </td>
	     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr>
		
	   <tr>
	     <td align="right" ><div class="page_info_lable">穿刺/换药</div></td>
	     <td class="local_check_page">
	       <div class="page_info"><input type="text" class="info_input"  name="tx_fs" value="" readonly="readonly" placeholder="请选择"  /> </div>
	     </td>
	     <td align="right" class="local_check_page"><a href="javascript:void(0);" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr>	
		
	   <tr class="tx_common hidden" >
	     <td align="right" ><div class="page_info_lable tx_hs">穿刺护士</div></td>
	     <td class="select_page">
	       <div class="page_info">
	        <input type="hidden" class="info_input_id" name="tx_sj_nurse_id" value="${txzlxj.tx_sj_nurse_id}" />
	        <input type="text" class="info_input"  name="tx_sj_nurse" value="${txzlxj.tx_sj_nurse}" readonly="readonly" placeholder="请选择"  />
	       </div>
	     </td>
	     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_hs" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr>
	    
	   <tr class="tx_cc hidden">
	     <td align="right" ><div class="page_info_lable">穿刺方式</div></td>
	     <td class="check_page">
	       <div class="page_info"><input type="text" class="info_input"  name="tx_ccfs" value="${txzlxj.tx_ccfs}" readonly="readonly" placeholder="请选择"   /> </div>
	     </td>
	     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccfs" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr> 
	    
	    <tr class="tx_cc hidden">
	     <td align="right" ><div class="page_info_lable">穿刺针</div></td>
	     <td class="check_page">
	       <div class="page_info"><input type="text" class="info_input"  name="tx_ccz" value="${txzlxj.tx_ccz}" readonly="readonly" placeholder="请选择"  /> </div>
	     </td>
	     <td align="right" class="check_page"><a href="javascript:void(0);"  title="tx_ccz" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr> 
	   
	   <tr class="hidden tx_ccfx tx_new">
	     <td align="right" ><div class="page_info_lable">A端穿刺方向</div></td>
	     <td class="select_page">
	       <div class="page_info"><input type="text" class="info_input"  name="tx_ccfx" value="${txzlxj.tx_ccfx}" readonly="readonly" placeholder="请选择"  /> </div>
	     </td>
	     <td align="right" class="select_page"><a href="javascript:void(0);"  title="tx_ccfx" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr> 
	   
	   <tr class="tx_tlpic tx_new">
	     <td align="right"  ><div class="page_info_lable">通路图片</div></td>
	     <td class="xgtl_pic_page">
	       <div class="page_info" id="viewMarkPic">点击查看</div>
	     </td>
	     <td align="right" class="xgtl_pic_page" ><a href="javascript:void(0);"  ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr> 
	   
	   <tr class="hidden tx_ccwd tx_new">
	     <td align="right" ><div class="page_info_lable">穿刺位点</div></td>
	     <td class="xgtl_ccwd_page">
	       <div class="page_info">
	         <input type="hidden" class="info_input"  name="tx_ccwd_a" id="selectMark_a" value="${txzlxj.tx_ccwd_a}" readonly="readonly" placeholder="请选择"  />
	         <input type="hidden" class="info_input"  name="tx_ccwd_v" id="selectMark_v" value="${txzlxj.tx_ccwd_v}" readonly="readonly" placeholder="请选择"  /> 
	         <input type="text" class="info_input"  name="tx_ccwd" id="selectMark_show" value="" readonly unselectable="on" onfocus="this.blur()" placeholder="请选择"  /> 
	       </div>
	     </td>
	     <td align="right" class="xgtl_ccwd_page"><a href="javascript:void(0);"  title="" ><img src="image/yunjing/mtxform/right_gray.png" class="modal_select_arrows" alt="选择" /></a></td>
	   </tr> 
			    
	   <tr><td colspan="3"></td></tr>
   </table>
  </form>  
 
  <div class="modal fade" id="select_Modal" role="dialog" style="display:none;" >
       <input type="hidden" name="input_type"  value=""   />
       <input type="hidden" name="input_name"  value=""  />
       <input type="hidden" name="input_id"  value=""  />
       <input type="hidden" name="input_val"  value=""  />
       <input type="hidden" name="info_lable"  value=""  />
       <input type="hidden" name="dic_type"  value=""  />
       <input type="hidden" name="define_type"  value=""  />
       <div class="weui-cells weui-cells_radio modal_container">
         <table class="table table_info page_fixed_head_table">
		   <tr class="">
		     <td class="col-xs-4" align="left">
		          <a href="javascript:void(0);"  class="" data-dismiss="modal" >
		           <img src="image/yunjing/mtxform/goback.png"  alt="返回" class=""  />
		          </a>
		     </td> 
		     <td class="col-xs-4" align="center"><span class="back_title">开始透析</span></td>
		     <td class="col-xs-4" align="right"><a href="javascript:void(0);"  class="modal_confirm_div" onclick=""><span class="back_save">保存</span></a></td>
		   </tr>
		   <tr><td colspan="3"><div class="modal_type_tittle"></div></td></tr>
	     </table>
         <div class="modal_content"></div> 
      </div>
  </div>
  
  <div class="modal fade" id="select_local_modal" role="dialog"  >
     <input type="hidden" name="local_input_name"  value=""  />
     <input type="hidden" name="local_input_val"  value=""  />
     <div class="weui-cells weui-cells_radio modal_container">
         <table class="table table_info page_fixed_head_table">
		   <tr class="">
		     <td class="col-xs-4" align="left">
		          <a href="javascript:void(0);"  class="" data-dismiss="modal" >
		           <img src="image/yunjing/mtxform/goback.png"  alt="返回" class=""  />
		          </a>
		     </td> 
		     <td class="col-xs-4" align="center"><span class="back_title">开始透析</span></td>
		     <td class="col-xs-4" align="right"><a href="javascript:void(0);"  class="local_modal_confirm_button" onclick=""><span class="back_save">保存</span></a></td>
		   </tr>
	     </table> 
          <div class="local_modal_content" style="margin-top: 50px;">
	          <button type="button"  data-id="0"   data-name="穿刺" class="btn btn-default btn_common" onclick="selectone(this);" >穿刺</button>
	          <button type="button"  data-id="1"   data-name="换药" class="btn btn-default btn_common" onclick="selectone(this);" >换药</button>
          </div> 
      </div>
  </div>
 
   <ul class="page_scroll_hour_add" style="display: none;" >
       <li class="li_add">01时</li> <li class="li_add">02时</li> <li class="li_add">03时</li> <li class="li_add">04时</li> <li class="li_add">05时</li>  <li class="li_add">06时</li>
       <li class="li_add">07时</li> <li class="li_add">08时</li> <li class="li_add">09时</li> <li class="li_add">10时</li> <li class="li_add">11时</li>  <li class="li_add">12时</li>
       <li class="li_add">13时</li> <li class="li_add">14时</li> <li class="li_add">15时</li> <li class="li_add">16时</li> <li class="li_add">17时</li> <li class="li_add">18时</li>
       <li class="li_add">19时</li> <li class="li_add">20时</li> <li class="li_add">21时</li> <li class="li_add">22时</li> <li class="li_add">23时</li> <li class="li_add">00时</li>
   </ul> 
   
    <ul class="page_scroll_minute_add" style="display: none;">
       <li>01分</li><li>02分</li><li>03分</li><li>04分</li><li>05分</li><li>06分</li><li>07分</li><li>08分</li><li>09分</li><li>10分</li>
       <li>11分</li><li>12分</li><li>13分</li><li>14分</li><li>15分</li><li>16分</li><li>17分</li><li>18分</li><li>19分</li><li>20分</li>
       <li>21分</li><li>22分</li><li>23分</li><li>24分</li><li>25分</li><li>26分</li><li>27分</li><li>28分</li><li>29分</li><li>30分</li>
       <li>31分</li><li>32分</li><li>33分</li><li>34分</li><li>35分</li><li>36分</li><li>37分</li><li>38分</li><li>39分</li><li>40分</li>
       <li>41分</li><li>42分</li><li>43分</li><li>44分</li><li>45分</li><li>46分</li><li>47分</li><li>48分</li><li>49分</li><li>50分</li>
       <li>51分</li><li>52分</li><li>53分</li><li>54分</li><li>55分</li><li>56分</li><li>57分</li><li>58分</li><li>59分</li><li>00分</li>
    </ul>
    <div id="view-markpic-wrap" style="display:none;">
        <div class="shadow"></div>
        <div id="markpicWarp2">
	        <div class="mtx-markpic-wrap">	
	        	<div id="point_mark_img_wrap1"><img src="" alt="血管通路图片"></div>
	            <div class="close-view-img_" ><span class="close-view-img">×</span></div>
        	</div>
        </div>
    </div>
    
    <div id="mtxselectCcwdWrap" style="display:none;">
    	<div class="wd-box">
    		<div style="min-height:800px;padding: 0 6px 30px 6px;position:relative;">
    			<div class="mark-pic-top">
		            <div class="back" style="padding:4px;width:60px;height:42px;" onclick="closedMarkList()"><img src="image/yunjing/mtxform/go_back.svg" style="width:24px;height:24px;" class="goback_arrows" alt="返回" /></div>
		            <div class="title process-name" style="font-size:18px;">穿刺位点</div>
		            <div class="save-mark" style="width:76px;text-align:right;" onclick="saveMarkList()">保存</div>
		        </div>
		        <div class="title-2 title" style="position:relative;">穿刺位点<span style="position:absolute;left:50%;top:50%;transform: translate(-50%, -50%);color:red;" id="mark_tips"></span></div>
    			<div>
		        	<form class="form-inline" onsubmit="return false;" style="padding: 10px 4px;font-size:15px;">
			          <table class="table-condensed" style="width: 100%;">
			              <tbody>	             
				              <tr class="tr_head">
						        <td style="width:50%">
							       <div style="position:relative;width:100%;">   
							          <span>A端位点：</span>
								      <select class="form-control form-control2" name="tx_bc" id="xgtl_mark_a" onchange="selectMarkA('#xgtl_mark_a','.mark-target-a');">
							          </select>
							        </div>  
						         </td> 
							     <td class="mtxform_td_padding" style="text-align:right;width:50%;">
								    <div style="position:relative;width:100%;">   
								       <span>V端位点：</span> 
								       <select class="form-control form-control2" name="tx_order" id="xgtl_mark_v" onchange="selectMarkA('#xgtl_mark_v','.mark-target-v');">
								       </select>
								    </div>    
							     </td>
					          </tr>
				         </tbody>
			         </table>
			       </form>
		        </div>
		        
		        <!-- 位点图片S -->
		        <div style="position:relative;padding: 2px;background-color: #fff;border: 1px solid #ddd;border-radius: 2px;">
			        <div id="point_mark_img_wrap1_m" style="width:100%;padding:0;border:0;">
			        	<img id="ossPointMarkImg_m" style="max-width:100%;"  class="point-mark-img" alt="血管通路图">
			        </div>
			    </div>
			    <!-- 位点图片E -->
			    
			    <div style="position:relative;height:60px;display:flex;justify-content: center;align-items: center;border-bottom: thin solid #ddd;">
			     	<span id="change_pic_btn" style="display:inline-block;width:100px;height:32px;line-height:32px;font-size:16px;color:#fff; cursor: pointer;background:#35a2e7;border-radius:2px;text-align:center;">更换图片</span>	
			    </div>
			    <input type="file" class="upload_input" name="mark_img" id="changePicInput" 
								style="width:180px;cursor: pointer;height:35px;position:absolute;left:2000px;top:0;opacity:0;" accept="image/*" >
			    <div class="title mark-list-title" style="margin:8px 0 6px 0;"><span class="line"></span><span>近10次位点记录：</span></div>
			    <div id="pointMarkList">
  					<table class="table table-bordered">
  						<tbody>
		  					<tr class="mark-thead-tr">
		  						<td class="mark-date mark-date-th">日期</td>
		  						<td class="mark-point mark-point-th">位点</td>
		  						<td class="other-case other-case-th">内瘘</td>
		  					</tr>
  						</tbody>
		  				<tbody id="markListTbody">
		  				</tbody>
		  			</table>
  				</div>	
    		</div>
    	</div>
    </div>
  </body>
  <script type="text/template" id='markListTpl_a'>
         {{each data as v i}}
            <tr>
                <td class="mark-date">{{data[i].tx_txsj}}</td>
                <td class="mark-point mark-point-text">
                    <p style="margin-bottom:4px;">A端：
                        <span class="mark-a">{{data[i].tx_ccwd_a}}</span>
                    </p>
                    <p style="margin-bottom:4px;">V端：
                        <span class="mark-v">{{data[i].tx_ccwd_v}}</span>
                    </p>
                </td>
                <td class="other-case">
                    <p style="margin-bottom:4px;">透前：
                        <span>{{data[i].tq_nl}}</span>
                    </p>
                    <p style="margin-bottom:4px;">透后：
                        <span>{{data[i].th_nl}}</span>
                    </p>
                </td>
            </tr>
         {{/each}}
  </script>
  <script type="text/javascript" src="${ctx}js/jquery/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="${ctx}js/layer/layer.js"></script>
  <script type="text/javascript" src="${ctx}bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${ctx}js/yunjing/mtxform.js?v=201704121759"></script>
  <script type="text/javascript" src="js/common/common.js"></script>
  <script type="text/javascript" src="js/jquery/mobile/jquery.mobile.custom.min.js"></script>
  <script type="text/javascript" src="js/template-web.js"></script>
  <script>
  $(function(){
   //默认护士
   if($("input[name='tx_zl_nurse']").val()==""){
     if(${userinfo.USER_PERMISSION==3||userinfo.USER_PERMISSION==4}){
        $("input[name='tx_zl_nurse']").val("${userinfo.USER_NAME}");
        $("input[name='tx_zl_nurse_id']").val("${userinfo.USER_ID}");
      }
    }
   if($("input[name='tx_sj_nurse']").val()==""){
     if(${userinfo.USER_PERMISSION==3||userinfo.USER_PERMISSION==4}){
        $("input[name='tx_sj_nurse']").val("${userinfo.USER_NAME}");
        $("input[name='tx_sj_nurse_id']").val("${userinfo.USER_ID}");
     }
   }
   //默认上次的穿刺/换药
   if("${lastzlxj.tx_ccfs}"!=""||"${lastzlxj.tx_ccz}"!=""){
       $("input[name='tx_fs']").val("穿刺");
       $("input[name='tx_ccfs']").val("${lastzlxj.tx_ccfs}");
       $("input[name='tx_ccz']").val("${lastzlxj.tx_ccz}");
       $("input[name='tx_ccfx']").val("${lastzlxj.tx_ccfx}");
       $("tr.tx_common").removeClass("hidden");
	   $("tr.tx_cc").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	   //判断是穿刺方式是否包含 绳梯法
      if("${lastzlxj.tx_ccfs}".indexOf("绳梯法")>=0){
		   $("tr.tx_tlpic").addClass("hidden");
           $("tr.tx_ccfx").removeClass("hidden");
           $("tr.tx_ccwd").removeClass("hidden");
           //穿刺位点
           $("input[name='tx_ccwd_a']").val("${lastzlxj.tx_ccwd_a}");
           $("input[name='tx_ccwd_v']").val("${lastzlxj.tx_ccwd_v}");
           $("input[name='tx_ccwd']").val(("${lastzlxj.tx_ccwd_a}"!="" && "${lastzlxj.tx_ccwd_v}"!="")?"A端：${lastzlxj.tx_ccwd_a},V端：${lastzlxj.tx_ccwd_v}":"");
		 }else{
		   $("tr.tx_ccwd").addClass("hidden");
           $("tr.tx_ccfx").removeClass("hidden");
           $("tr.tx_tlpic").removeClass("hidden");
           $("input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
	   } 
   }else{
       $("input[name='tx_fs']").val("换药");
       $("tr.tx_common").removeClass("hidden");
	   $("tr.tx_cc").addClass("hidden");$("div.tx_hs").text("换药护士");
	   $("input[name='tx_ccfs'],input[name='tx_ccz'],input[name='tx_ccfx'],input[name='tx_ccwd_a'],input[name='tx_ccwd_v']").val("");
   }
   
    //默认滚动到当前时间
    var date = new Date();
    var h=date.getHours();
    var m=date.getMinutes();
    if(h>3){$(".page_scroll_hour").scrollTop((h-3)*36);}else{
        $(".page_scroll_hour").prepend($("ul.page_scroll_hour_add").html());
        $(".page_scroll_hour").scrollTop((h+21)*36);
    }
    if(m>3){$(".page_scroll_minute").scrollTop((m-3)*36);}else{
        $(".page_scroll_minute").prepend($("ul.page_scroll_minute_add").html());
        $(".page_scroll_minute").scrollTop((m+57)*36); 
        
    }
    $("input[name='tx_start_time_hi']").val(getNowHiDate());  
    
  
   $(".local_check_page").click(function(){ 
      var $ele=$(this).parent("tr").find("input");
      $("input[name='local_input_name']").val($ele.attr("name"));
      $("div.local_modal_content").find("button.btn_common[data-name='"+$ele.val()+"']").addClass("btn_active");
      $("#select_local_modal").modal("show");
   });
   
   $("#select_local_modal").on("click",".local_modal_confirm_button",function(){
       var va=$("div.local_modal_content").find('button.btn_active').text();      //如果是单选
	   $("input[name='"+$("input[name='local_input_name']").val()+"']").val(va);//设置保存的input的值为选中的值
	   if(va=="穿刺"){
	      $("tr.tx_common").removeClass("hidden");
	      $("tr.tx_cc,tr.tx_ccfx").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	      $("input[name='tx_ccfs']").attr("disabled",false);
	      $("input[name='tx_ccz']").attr("disabled",false);
	      if($("input[name='tx_ccfs']").val().indexOf("绳梯法")>=0){
	      	$("tr.tx_ccwd").removeClass("hidden")
	      }else{
	      	$("tr.tx_tlpic").removeClass("hidden")
	      }
	   }
	   if(va=="换药"){
	      $("tr.tx_common").removeClass("hidden");
	      $("tr.tx_cc,tr.tx_ccwd,tr.tx_ccfx,tr.tx_tlpic").addClass("hidden");$("div.tx_hs").text("换药护士");
	      $("input[name='tx_ccfs']").attr("disabled","disabled");
	      $("input[name='tx_ccz']").attr("disabled","disabled");
	   }
       $("#select_local_modal").modal('hide');	 
   });
	
   // 进入页面判断一次显示穿刺或者换药的选项
   function tabViewCcHy(){
   	  var va = $("input[name='tx_fs']").val();      
	   if(va=="穿刺"){
	      $("tr.tx_common").removeClass("hidden");
	      $("tr.tx_cc,tr.tx_ccfx").removeClass("hidden");$("div.tx_hs").text("穿刺护士");
	      if($("input[name='tx_ccfs']").val().indexOf("绳梯法")>=0){
	      	$("tr.tx_ccwd").removeClass("hidden")
	      	$("tr.tx_tlpic").addClass("hidden")
	      }else{
	      	$("tr.tx_tlpic").removeClass("hidden")
	      	$("tr.tx_ccwd").addClass("hidden")
	      }
	   }
	   if(va=="换药"){
	      $("tr.tx_common").removeClass("hidden");
	      $("tr.tx_cc,tr.tx_ccwd,tr.tx_ccfx,tr.tx_tlpic").addClass("hidden");$("div.tx_hs").text("换药护士");
	      $("input[name='tx_ccfs']").val("");
	      $("input[name='tx_ccz']").val("");
	      $("input[name='tx_ccfx']").val("");
          $("input[name='tx_ccwd_a']").val("");
          $("input[name='tx_ccwd_v']").val("");
          $("input[name='tx_ccwd']").val("");
	   }
   }
   tabViewCcHy()
	
   //保存数据
   $(".head_confirm").click(function(){
     var tx_fs=$("input[name=tx_fs]").val();
     if(""==tx_fs){layer.msg("穿刺/换药不能为空！");return false;}
     if(""==$("input[name=tx_zl_nurse]").val()){layer.msg("治疗护士不能为空！");return false;}
     if(""==$("input[name=tx_sj_nurse]").val()){layer.msg("穿刺/换药护士不能为空！");return false;}
     if(""==$("input[name=tx_ccfs]").val()&&tx_fs=="穿刺"){layer.msg("穿刺方式不能为空！");return false;}
     if(""==$("input[name=tx_ccz]").val()&&tx_fs=="穿刺"){layer.msg("穿刺针不能为空！");return false;}
     //校验时间格式
     var hi=$("input[name='tx_start_time_hi']").val();
     if(!checkhi(hi)){layer.msg("时间格式不正确！");return false;}
     $("input[name='tx_start_time']").val(getNowymdDate()+" "+hi);  
     var form_data= $("#tx_form").serializeArray();
     $.ajax({
         type:"post",
         data:form_data,
         async:false,
         url:"txform/mtxform_txbegin.shtml",
         dataType:"json",
         beforeSend:function(){
            $(".head_confirm").attr("disabled","disabled");
         },
         success:function(data,status){
          if(data['status']==""){
            layer.msg("开始透析成功！");
            //var tx_jcjl_ymd=getNowymdDate();
            window.location.href="${ctx}txform/mtxform_hzjcjl_detail.shtml?id="+data.jcjlid+"&tx_number=${param.tx_number}&tx_name=${param.tx_name}&tx_time=${param.tx_time}&tx_jcjl_ymd="+getNowymdDate();
            //setTimeout("window.location.href='${ctx}txform/mtxform_hzjcjl_detail.shtml?id="+data.jcjlid+"&tx_number=${param.tx_number}&tx_name=${param.tx_name}&tx_time=${param.tx_time}&tx_jcjl_ymd="+tx_jcjl_ymd+"'",2000) 
            // $(".back_a").trigger("click");
           }else{layer.alert(data.status);}
          },error:function(){
             $(".head_confirm").removeAttr("disabled");
             layer.msg("保存出错，请检查数据！"); 
          },complete:function(){
             //$(".head_confirm").removeAttr("disabled");
          }
      });  
   });
   
   
   $("ul.page_scroll_hour").on("scrollstop",function(){
      //console.log("滚动结束："+$(".page_scroll_hour").scrollTop());
      var d_top=$(".page_scroll_hour").scrollTop();
      //console.log(d_top%36+"___"+parseInt(d_top/36));
      if(d_top%36<=18){$(".page_scroll_hour").scrollTop(parseInt(d_top/36)*36);}else{$(".page_scroll_hour").scrollTop((parseInt(d_top/36)+1)*36);}
      //判断是否拖到顶部或者底部
      if(parseInt(d_top/36)>=19){
        $(".page_scroll_hour").append($("ul.page_scroll_hour_add").html());
      }else{
        $(".page_scroll_hour").prepend($("ul.page_scroll_hour_add").html());
        $(".page_scroll_hour").scrollTop((parseInt(d_top/36)+24)*36);
      } 
      //console.log("hour:"+(parseInt(d_top/36)+3)%24);
      var nth=parseInt(d_top/36)+3;
      //console.log(nth,d_top,d_top/36,new Date(),new Date().getTime())
      $("ul.page_scroll_hour li:nth-child("+nth+")").addClass("scroll_li_active").siblings().removeClass("scroll_li_active");
      var tx_start_time=$("input[name='tx_start_time_hi']").val();var h=(parseInt(d_top/36)+3)%24;
      $("input[name='tx_start_time_hi']").val((h<10?"0"+h:h)+":"+tx_start_time.split(":")[1]);  
   });
   
   $("ul.page_scroll_minute").on("scrollstop",function(){
      //console.log("滚动结束："+$(".page_scroll_minute").scrollTop());
      var d_top=$(".page_scroll_minute").scrollTop();
      //console.log(d_top%36+"___"+parseInt(d_top/36));
      if(d_top%36<=18){$(".page_scroll_minute").scrollTop(parseInt(d_top/36)*36);}else{$(".page_scroll_minute").scrollTop((parseInt(d_top/36)+1)*36);}
      //判断是否拖到顶部或者底部
      if(parseInt(d_top/36)>=19){
        $(".page_scroll_minute").append($("ul.page_scroll_minute_add").html());
      }else{
        $(".page_scroll_minute").prepend($("ul.page_scroll_minute_add").html());
        $(".page_scroll_minute").scrollTop((parseInt(d_top/36)+60)*36);
      } 
      //console.log("min:"+(parseInt(d_top/36)+3)%60);
      var nth=parseInt(d_top/36)+3;      
      $("ul.page_scroll_minute li:nth-child("+nth+")").addClass("scroll_li_active").siblings().removeClass("scroll_li_active");
      var tx_start_time=$("input[name='tx_start_time_hi']").val();var m=(parseInt(d_top/36)+3)%60;
      $("input[name='tx_start_time_hi']").val(tx_start_time.split(":")[0]+":"+(m<10?"0"+m:m));  
   });
 
   //绑定点击事件
   $("body").on("click",".modal_confirm_div",function(){ 
      var info_lable=$("input[name=info_lable]").val();
      if("穿刺方式"==info_lable){
         var flag=0;
         $("div.modal_content>button.btn_active").each(function(){
           if($(this).text().indexOf("绳梯法")>=0){
		      flag=1;
	       }
		 });
		 if(flag==1){
		   $("tr.tx_tlpic").addClass("hidden");
           $("tr.tx_ccfx").removeClass("hidden");
           $("tr.tx_ccwd").removeClass("hidden");
		 }else{
		   $("tr.tx_ccwd").addClass("hidden");
           $("tr.tx_ccfx").removeClass("hidden");
           $("tr.tx_tlpic").removeClass("hidden");
		 }
      }
   });
   
   
   
   var xgtl_ccwd_page=null;
    $("body").on("click",".xgtl_ccwd_page",function(){ 
    	var tx_number = '${param.tx_number}';
		var user_id = '${userinfo.USER_ID.substring(0, 4)}';
		var randomNum = parseInt(Math.random()*10000000);
		$("#ossPointMarkImg_m").attr("src","https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/"+ user_id +"/"+ tx_number +".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v="+randomNum);
		$("#ossPointMarkImg_m").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v=20180126';");       
    		$("#mtxselectCcwdWrap").show();
    		previewMark()
			
    		//更换图片
			$("#change_pic_btn").off("click").on("click",function(){
	     		layer.confirm('更换图片后原有标记将被清除!', {
		            icon: 3,
		            title: '提示'
		        }, function (index) {
					$("#changePicInput").click()
		
		            layer.close(index);
		        }, function (index) {
					
		        });
			})
    	 /* if (/(iPhone|iPad|iPod|iOS|Android|micromessenger)/i.test(navigator.userAgent)){ //iframe页面方式有问题  
	       xgtl_pic_page=layer.open({
		        type: 2,
				title: false,
				closeBtn: 0,
				anim: 2,
				shadeClose: false,
				skin:'layui-layer-mtxform',
				area: ['100%', '100%'],
				content:'txform/mtxform_xgtlccwd.shtml?tx_number=${param.tx_number}',
				success: function(layero){
	               $(layero).addClass("scroll-wrapper");//苹果 iframe 滚动条失效解决方式
	            } 
		   });
	   } */ 
   });
   getOSSAuth_xgtl() 
 });
	
		// 显示通路图片
		var xgtlTagId = ""; 
  		var tx_number = '${param.tx_number}';
  		var user_id = '${user_id.substring(0, 4)}';
  		$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){//获取是否有位点标记历史记录ID
	     	if(res.status.length > 0){
		     	xgtlTagId = res.status[0].tx_id;
		     }
	     })
  		$("#tx_form").on("click.viewpic","#viewMarkPic",function(){
  			var pic_view = $("#view-markpic-wrap");
  			var src = 'https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${user_id.substring(0, 4)}/${param.tx_number}.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&tag='+parseInt(Math.random()*1000);
  			pic_view.find("img").attr("src",src);
  			pic_view.find("img").attr("onerror","this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&v=20180126';")
  			
  			
  			$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
  				if(res.status.length == 0){
					return
				}
  				$("#point_mark_img_wrap1").find("div").remove()
				var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
				 	mark_A = mark_data.A,
				 	mark_V = mark_data.V,
				 	mark_T = mark_data.T;
				if(mark_A.length === 0 && mark_V == 0 && mark_T === 0){
					return
				}
				
				mark_A.map(function (i, v) {
					var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + '</div>';
						//console.log(markDom)
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_V.map(function (i, v) {
					//console.log(i)
					var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
						'deg);" data-rotate="' + i.rotate + '"></span>';
					var num = parseInt(i.markNum);
					var markDom = '<div class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-num=' + num +
						' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + '</div>';
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
	
				mark_T.map(function (i, v) {
					//console.log(i)
					var markDom = '<div class="add-mark-text-wrap" style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%;">'
									+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
									+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
									+'</div>'	
					$(markDom).appendTo($("#point_mark_img_wrap1"));
				})
				
				var scale = $("#point_mark_img_wrap1").outerWidth() / 600; //PC端的宽度为600，计算缩放比例
				//console.log(scale)
				$("#point_mark_img_wrap1 .mtx-mark-tag").each(function (i, v) {
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale,
						left = parseInt($that.position().left) * scale,
						top = parseInt($that.position().top) * scale;
					$that.css({
						"left": left + "px",
						"top": top + "px",
						"width": width + "px",
						"height": height + "px",
						"line-height": height + "px",
						"border-radius": height / 2 + "px"
					})
					
					var $line = $that.find(".mark-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
					if(scale < 0.7 ){
						$that.css({
							"font-size": "12px",
							"transform": "scale(1.2,1.2)"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.8333)"
						})
					}
					if(scale > 1 ){
						$that.css({
							"font-size": "24px"
						})
						$line.css({
							"transform": "rotate(" + $line.data("rotate") + "deg)"
						})
					}
				})
				
				//查看通路图片的文字标注信息位置调整
				$("#point_mark_img_wrap1 .add-mark-text-wrap").each(function (i, v) {
					//console.log(v)
					var $that = $(this),
						width = parseInt($that.width()) * scale,
						height = parseInt($that.height()) * scale;
					$that.css({
						"height": height + "px"
					})
					
					var $line = $that.find(".mark-text-line");
					$line.css({
						"width": $line.width() * scale,
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				})
  			})
  			pic_view.css("display","block");
  			pic_view.on("touchstart", "div,img",function (e) {
  				e.stopPropagation();
	            //e.preventDefault(); //阻止触摸时页面的滚动，缩放
  			})
  			$("#markpicWarp2 .close-view-img_ , div.shadow").click(function(){
  				$("#view-markpic-wrap div.mtx-mark-tag , #view-markpic-wrap .add-mark-text-wrap").remove()
  				pic_view.css("display","none");
  			})
  		})
  		function previewMark() {
  			$.ajax({  
          		type : "POST",
          		data :{"tx_number":tx_number,"list_type":"0"},  
          		url : "xgtl/xgtlwdtlist.shtml",           		  
          		async : false,
          		timeout : 10000,  
          		success : function(res){
          			if(res.status.length == 0){
          				$("#markListTbody").html('<tr><td colspan="3">暂无位点记录数据</td></tr>');
          				return false;
          			}
          			
          			var data = res.status;
          			var resArr ={data:data} ;
					//渲染历史记录模板
					var $ListHtml = template('markListTpl_a',resArr);
					$("#markListTbody").html($ListHtml);
					$("#pointMarkList .mark-point-text").each(function(i,v){//移除位点为空的使用记录
						if($(v).find("span").eq(0).text() === "" || $(v).find("span").eq(1).text() === ""){
							$(v).parent().remove()
						}
					})
					if($("#pointMarkList .mark-point-text").length == 0){
						$("#markListTbody").html('<tr><td colspan="3" align="center">暂无位点记录数据</td></tr>');
					}
          		}
          	})
  			
  			
	   		$.post("xgtl/listxgtlwdt.shtml",{"tx_number":tx_number},function(res){
			if(res.status.length == 0){
				$("#mark_tips").text("暂无位点标记数据");
				return
			}
			$(".save-mark").text("保存")
			$("#point_mark_img_wrap1_m").find("div").remove();
			var mark_data = JSON.parse(res.status[0].tx_xgtl_text),			
			 	mark_A = mark_data.A,
			 	mark_V = mark_data.V,
			 	mark_T = mark_data.T;
			if(mark_data.status == "empty"){
	     			return false;
	     		}
			if(mark_A.length === 0 && mark_V == 0 && mark_T === 0){
				return
			}
			$("#xgtl_mark_a").empty();
			mark_A.map(function (i, v) {
				//console.log(i)
				var tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_a1 = '<div class="mark-num-child" style="position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:#fff;" data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';
				var num = parseInt(i.markNum);
				var markDom = '<div onclick="selectMarkB(this)" class="mtx-mark-tag mark-target-a mark-target-a' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span_a1 + tag_div_a1 + '</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
				$("#xgtl_mark_a").append("<option value='"+num+"'>"+num+"</option>");
			})
			$("#xgtl_mark_v").empty();
			mark_V.map(function (i, v) {
				//console.log(i)
				var tag_span = '<span class="mark-line mark-line-v" style="transform: rotate(' + i.rotate +
					'deg);" data-rotate="' + i.rotate + '"></span>';
				var tag_div_v1 = '<div class="mark-num-child" style="position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:#fff;" data-num="' + 
				parseInt(i.markNum) + '">'+parseInt(i.markNum)+'</div>';	
				var num = parseInt(i.markNum);
				var markDom = '<div onclick="selectMarkB(this)" class="mtx-mark-tag mark-target-v mark-target-v' + num + '" data-left=' + i.left + ' data-top=' + i.top +' data-num=' + num +
					' style="position:absolute;left:' + i.left + 'px;top:' + i.top + 'px;">' + num + tag_span + tag_div_v1 +'</div>';
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
				$("#xgtl_mark_v").append("<option value='"+num+"'>"+num+"</option>");
			})

			mark_T.map(function (i, v) {
				//console.log(i)
				var markDom = '<div class="add-mark-text-wrap" data-left=' + i.left + ' data-top=' + i.top +' data-width='+i.width+' style="position:absolute;left:' + i.left + '%;top:' + i.top + '%;width:'+i.w+'%">'
								+	'<input type="text"  class="mark-text-ipt" value="'+ i.text +'" readonly="true" style="width:'+ i.width +'px;">'
								+	'<span class="mark-text-line" style="transform: rotate(' + i.rotate + 'deg);" data-rotate="' + i.rotate + '"></span>'
								+'</div>'	
				$(markDom).appendTo($("#point_mark_img_wrap1_m"));
			})
			var scale = $("#point_mark_img_wrap1_m").outerWidth() / 600 * 100; //PC端的图片容器宽度为600，计算缩放比例
			//console.log(scale)
			$("#point_mark_img_wrap1_m .mtx-mark-tag").each(function (i, v) {
				var $that = $(this),
					width = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100,
					left = parseInt($that.data("left")) * scale / 100,
					top = parseInt($that.data("top")) * scale / 100;
				$that.css({
					"left": left + "px",
					"top": top + "px",
					"width": width + "px",
					"height": height + "px",
					"line-height": height + "px",
					"border-radius": height / 2 + "px"
				})
				
				var $line = $that.find(".mark-line");
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
				if($("#point_mark_img_wrap1_m").outerWidth() / 600 < 0.7 ){
					$("div.mark-num-child").css({
						"font-size": "12px"
					})
					$that.css({
						"font-size": "12px",
						"transform": "scale(1.2,1.2)"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg) scale(0.83333)"
					})
				}
				if($("#point_mark_img_wrap1_m").outerWidth() / 600 > 1.17 ){//屏幕宽度大于720px
					$("div.mark-num-child").css({
						"font-size": "24px"
					})
					$line.css({
						"transform": "rotate(" + $line.data("rotate") + "deg)"
					})
				}
			})
			
			$("#point_mark_img_wrap1_m .add-mark-text-wrap").each(function (i, v) {
				var $that  = $(this),
					width  = parseInt($that.width()) * scale / 100,
					height = parseInt($that.height()) * scale / 100;
				$that.css({
					"height": height + "px"
				})
				
				var $line = $that.find(".mark-text-line");
				$line.css({
					"width": $line.width() * scale / 100,
					"transform": "rotate(" + $line.data("rotate") + "deg)"
				})
			})
		  
		    
			
		  //根据上一次的位点使用情况选择下一个位点
			var lastMark_a = parseInt($(".mark-point").eq(1).find(".mark-a").text());
			var lastMark_v = parseInt($(".mark-point").eq(1).find(".mark-v").text());
			var mark_a_num = $(".mark-target-a").length;
			var mark_v_num = $(".mark-target-v").length;
			var mark_a_arr = [],mark_v_arr = [];
			$("#point_mark_img_wrap1_m .mark-target-a").each(function(i,v){
				mark_a_arr.push($(this).data("num"))
			})
			$("#point_mark_img_wrap1_m .mark-target-v").each(function(i,v){
				mark_v_arr.push($(this).data("num"))
			})
			mark_a_arr = mark_a_arr.sort();
			mark_v_arr = mark_v_arr.sort();
			
			//递增上一次的位点标识，如果没有历史记录选择第一个
			if(lastMark_a){
				if(lastMark_a < mark_a_arr[mark_a_arr.length - 1]){//不是最大的值时，需判断下一个更大的
					var mark_a_next = 0;
					for(var ia = 0;ia < mark_a_arr.length;ia++){
						if(lastMark_a === mark_a_arr[ia]){
							mark_a_next = ia + 1;
							break;
						}
					}
					lastMark_a = mark_a_arr[mark_a_next];
					$(".mark-target-a"+lastMark_a).addClass("active")
					$("#xgtl_mark_a").val(lastMark_a)
				}else{
					$(".mark-target-a").eq(0).addClass("active")
					$("#xgtl_mark_a").val($(".mark-target-a").eq(0).data("num"))
				}
			}else{
				$(".mark-target-a" + $("#xgtl_mark_a").val()).addClass("active")
			}
			
			if(lastMark_v){
				if(lastMark_v < mark_v_arr[mark_v_arr.length - 1]){
					var mark_v_next = 0;
					for(var iv = 0;iv < mark_v_arr.length;iv++){
						if(lastMark_v === mark_v_arr[iv]){
							mark_v_next = iv + 1;
							break;
						}
					}
					lastMark_v = mark_v_arr[mark_v_next];
					$(".mark-target-v"+lastMark_v).addClass("active")
					$("#xgtl_mark_v").val(lastMark_v)
				}else{
					$(".mark-target-v").eq(0).addClass("active")
					$("#xgtl_mark_v").val($(".mark-target-v").eq(0).data("num"))
				}
			}else{
				$(".mark-target-v" + $("#xgtl_mark_v").val()).addClass("active")
			}
		  })
		}
		// 点击选择框切换图标样式
		function selectMarkA(select, markele) {
			var mark = $(select + " option:selected").val();
			$(markele).each(function (i, v) {
				var index = $(this).data("num");
				if (mark == index) {
					$(this).addClass("active").siblings(markele).removeClass("active");
					return false;
				}
			})
		}
		
		// 点击图标切换下拉框的值
		function selectMarkB(ele){
			var index = $(ele).data("num");
			if ($(ele).hasClass("mark-target-a")) {
				$(ele).addClass("active").siblings(".mark-target-a").removeClass("active");
				$("#xgtl_mark_a").val(index)
			} else {
				$(ele).addClass("active").siblings(".mark-target-v").removeClass("active");
				$("#xgtl_mark_v").val(index)
			}
		}
			
		function closedMarkList(){
  			$("#mtxselectCcwdWrap").hide()
  		}
  		function saveMarkList(){
  			var mark_a = $("#xgtl_mark_a option:selected").val();
			var mark_v = $("#xgtl_mark_v option:selected").val();
			if(!mark_a){
				layer.msg("A端位点标记为空!")
				return
			}
			if(!mark_v){
				layer.msg("V端位点标记为空!")
				return
			}
			$("#selectMark_a").val(mark_a);
			$("#selectMark_v").val(mark_v);
			$("#selectMark_show").val("A端：" + mark_a + " , V端："+ mark_v);
  			$("#mtxselectCcwdWrap").hide();
  		}
  		
  		
  		
  		/** 获取图片名称 **/
        var xgtlPicFile = document.querySelector('#changePicInput');

        if (window.FormData) {
            // 压缩图片需要的一些元素和对象
            var xgtlPic_reader = new FileReader(),
                xgtlPic_img = new Image();

            // 选择的文件对象
            var xgtlPic_file = null;

            // 缩放图片需要的canvas
            var xgtlPic_canvas = document.createElement('canvas');
            var xgtlPic_context = xgtlPic_canvas.getContext('2d');

            // base64地址图片加载完毕后
            xgtlPic_img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
				
                // 计算出目标压缩尺寸
                var maxWidth = 600,
                    maxHeight = 800;

                // 目标尺寸
                var targetHeight, targetWidth;
                //targetWidth = 600;targetHeight = 600*1.7778;

                // 按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));

                //按照高度限定尺寸
                /* targetHeight = maxHeight;
				targetWidth = Math.round(maxHeight * (originWidth / originHeight)); */
                xgtlPic_canvas.width = targetWidth;
                xgtlPic_canvas.height = targetHeight;

                // 清除画布
                xgtlPic_context.clearRect(0, 0, targetWidth, targetHeight);

                // 图片压缩
                xgtlPic_context.drawImage(xgtlPic_img, 0, 0, targetWidth, targetHeight);

                // 转为blob并上传
                xgtlPic_canvas.toBlob(function (blob) {
                    upload_xgtl(blob)

                }, xgtlPic_file.type || 'image/png');
            };

            // 文件base64化，以便获知图片原始尺寸
            xgtlPic_reader.onload = function (e) {
                // 图片尺寸
                xgtlPic_img.src = e.target.result;
                if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){//ios需主动调用上传方法
                	var i = new Image();
		            i.src = e.target.result;
		            i.crossOrigin="anonymous";
		            
				    //封装blob对象  
					var  blob = convertBase64UrlToBlob(i.src); 
		            upload_xgtl(blob)
                }
            };
            xgtlPicFile.addEventListener('change', function (event) {
                xgtlPic_file = event.target.files[0];
                if (xgtlPic_file.type.indexOf("image") == 0) {
                    xgtlPic_reader.readAsDataURL(xgtlPic_file);
                } else {
                    layer.alert("仅支持图片格式为jpg、gif、bmp、png、jpeg的文件！")
                }
            });
        }

        //上传图片到OSS

        var accessid_xgtl = '',
            policy_xgtl = '',
            signature_xgtl = '',
            Signature_xgtl = '',
            key_xgtl = "xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number + ".png",
            host_xgtl = '',
            expire_xgtl = 0,
            now_xgtl = 0;
        //var accessid='',policy='', Signature='', key="xgtl/${userinfo.USER_ID.substring(0, 4)}/xgtl_operation02.png" ,host='',expire = 0,now = 0;
        //获取授权
        function getOSSAuth_xgtl() {
            now_xgtl = Date.parse(new Date()) / 1000;
            if (expire_xgtl < now_xgtl + 3) {
                $.post(window.location.protocol + "//" + window.location.host + "/yunjingservice/OSSAuth/yjxgtl.shtml", function (data) {
                    accessid_xgtl = data.accessid;
                    policy_xgtl = data.policy;
                    signature_xgtl = data.signature;
                    expire_xgtl = data.expire;
                    host_xgtl = data.host;
                });
            }
        }


        function upload_xgtl(blob) {

            getOSSAuth_xgtl(); //获取授权
            var index_up = layer.msg("图片上传中...", {
                        time: 8000
                    })
            var fileval = $("input[name='mark_img']").val();
            var request = new FormData();
            request.append('OSSAccessKeyId', accessid_xgtl);
            request.append('policy', policy_xgtl);
            request.append('Signature', signature_xgtl);
            request.append('key', key_xgtl); //+filename
            request.append('success_action_status', '200'); //status头，如果不设置返回的是204
            request.append('Access-Control-Allow-Origin', '*');
            request.append('Access-Control-Allow-Methods', 'GET, POST');
            request.append('file', $("#changePicInput")[0].files[0]);
            $.ajax({
                url: host_xgtl,
                data: request,
                processData: false,
                cache: false,
                async: false,
                contentType: false,
                //关键是要设置contentType 为false，不然发出的请求头 没有boundary
                type: "POST",
                beforeSend: function () {
                },
                success: function (data, textStatus, request) {
                    $("#changePicInput").val("");
                    var changePic = layer.load(2, {
                        time: 10 * 1000
                    });
                    $("#point_mark_img_wrap1_m div.add-mark-text-wrap,div.mtx-mark-tag").remove();
                    var time = Date.parse(new Date());
                    $("#ossPointMarkImg_m").attr("src",
                        "https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${userinfo.USER_ID.substring(0, 4)}/" +
                        tx_number + ".png?x-oss-process=image/resize,w_600,h_800/quality,Q_100&tag=" + time);

                    document.getElementById("ossPointMarkImg_m").onload = function () {
                        layer.close(changePic)
                        $("select").empty();
                        $("#xgtl_mark_a,#xgtl_mark_v").attr("disabled", "disabled")
                        layer.msg("图片上传成功");
                        $("#selectMark_a").val("");
						$("#selectMark_v").val("");
						$("#selectMark_show").val("");
						$("#mtxselectCcwdWrap .save-mark").removeAttr("onclick");
						document.getElementById("ossPointMarkImg_m").onload = null;
                    }
                    var sendDatas = {
                        "status": "empty"
                    };
                    var datas = {};
                    if (xgtlTagId) { // 清除原来的标记
                        datas = {
                            "tx_id": xgtlTagId,
                            "tx_number": tx_number,
                            "tx_xgtl_a": "",
                            "tx_xgtl_v": "",
                            "tx_xgtl_text": JSON.stringify(sendDatas)
                        }

                        $.post("xgtl/updatexgtlwdt.shtml", datas, function (res) {
                            if (res.status != 0) {
                                console.log("清除历史标记成功")
                            } else {
                                console.log("清除历史标记失败")
                            }
                        })
                    }
                },
                error: function (data, textStatus, request) {
                    layer.msg("上传失败，请重试！");
                },
                complete: function () {
                    layer.close(index_up)
                }
            });
        }
        function convertBase64UrlToBlob(urlData){
		    var bytes=window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte
		    //处理异常,将ascii码小于0的转换为大于0
		    var ab = new ArrayBuffer(bytes.length);
		    var ia = new Uint8Array(ab);
		    for (var i = 0; i < bytes.length; i++) {
		        ia[i] = bytes.charCodeAt(i);
		    }
		    return new Blob( [ab] , {type : 'image/png'});
		}
	</script>
</html>